<template>
  <view
    :class="
      cn(
        'demo-block van-clearfix',
        {
          'demo-block--padding': padding,
        },
        customClass
      )
    "
  >
    <view v-if="title" class="demo-block__title">{{ title }}</view>
    <view class="demo-block__card" v-if="card">
      <slot />
    </view>
    <slot v-else />
  </view>
</template>

<script setup lang="ts">
import { cn } from "../../../vant/lib/utils";
defineProps<{
  title?: string;
  card?: boolean;
  padding?: boolean;
  customClass?: string;
}>();
</script>

<style>
.demo-block__title {
  margin: 0;
  padding: 20px 15px 15px;
  color: rgba(69, 90, 100, 0.6);
  font-weight: 400;
  font-size: 14px;
}

.demo-block__card {
  overflow: hidden;
  border-radius: 8px;
}

.demo-block--padding {
  padding: 0 15px;
}

.demo-block--padding .demo-block__title {
  padding-left: 0;
}
</style>
